<template lang="pug">
view.home-page
	view.custom-header(:style="{ height: `${height + statusBarHeight}px`, paddingTop: statusBarHeight + 'px' }")
		img(:src="`${prefix_image}/homepage/logo.png`")
		view.store
			view.name
				picker(@change="bindPickerChange" :value="index" :range="array" range-key="name")
					view.name
						text {{ array[index].name }}
						image(:src="`${prefix_image}/homepage/triangle.png`")
			text.location 距离{{ array[index].distance }}km
	view.home-body(:style="{ paddingTop: `${height + statusBarHeight}px` }")
		view.body-first
			view.item(v-for="(item, index) in iconList" @tap="iconClick(item,index)" :key="item.icon")
				image(:src="`${prefix_image}${item.icon}`")
				view.bubble.bubble1(v-if="index === 0")
					| 优
				view.bubble.bubble2(v-if="bubble2 && index === 2")
					| {{ bubble2 }}
				text.title {{ item.title }}
				text.desc {{ item.desc }}
		view.body-sed
			view.item.left(@tap="gotoServiceItems()")
				text.title 我的健康驿站
				text.desc 体验驱虫美容入口
				view.bottom
					image.go(:src="`${prefix_image}/homepage/go.png`")
					image.cat(:src="`${prefix_image}/homepage/cat1.png`")
			view.item.right(@tap="gotoActivityCheckIn()")
				text.title 打卡领积分
				text.desc 好物免费换购
				view.bottom
					image.go(:src="`${prefix_image}/homepage/go.png`")
					image.cat(:src="`${prefix_image}/homepage/cat2.png`")
		image.hotImg(:src="`${prefix_image}/homepage/hot.png`")
		view.activity
			image(mode="aspectFit" v-for="item in activityList" :src="`${prefix_image}${item.url}`" :key="item.id")
		guiPopup(ref="guipopup1" :showStatus="popupShow" :canCloseByShade="false" position="bottom")
			view.popupContent
				text.gui-grids-icon.gui-icons(@tap="closePopup") &#xe610;
				view.content 
					view.left(@tap="gotoHospitalListOffline()") 
						text 门店线下挂号
						image(:src="`${prefix_image}/homepage/popupLeft.png`")
					view.right(@tap="gotoHospitalListOnline()") 
						text 预约挂号
						image(:src="`${prefix_image}/homepage/popupRight.png`")
</template>
<script>
import { defineComponent, reactive, toRefs, getCurrentInstance } from 'vue';
import store from '@/store';
import guiPopup from "@/GraceUI5/components/gui-popup.vue";
import config from '@/hooks/useConfig.js'
export default defineComponent({
	components: {
		guiPopup
	},
	onLoad: () => {
		let lat = "", lng = ""
		const {
			appContext: 
			{
				config: { 
					globalProperties: global
					
				},
			},
		} = getCurrentInstance();
		uni.getLocation({
			type: 'wgs84',
			success: function (res) {
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				lat = res.longitude
				lng = res.latitude
				global.$request.post('/v1/api/home', {
					lat: lat,
					lng: lng
				}).then((res) => {
					console.log(res, "res")
				})
			}
		});
		
	},
	setup() {
		const { prefix_image,height, statusBarHeight }=config()
		
		const data = reactive({
			height: height,
			statusBarHeight: statusBarHeight,
			popupShow: false,
			iconList: [{
				title: '拍视频',
				desc: '秒懂狗狗',
				icon: '/homepage/icon/icon1.png'
			}, {
				title: '挂号预约',
				desc: '快速分诊',
				icon: '/homepage/icon/icon2.png'
			}, {
				title: '我要付费',
				desc: '诊药付费',
				icon: '/homepage/icon/icon3.png'
			}, {
				title: '就医记录',
				desc: '查看历史',
				icon: '/homepage/icon/icon4.png'
			}],
			bubble2: 1,
			activityList: [{
				id: 1,
				url: '/homepage/activity/activity1.png'
			}, {
				id: 2,
				url: '/homepage/activity/activity2.png'
			}, {
				id: 3,
				url: '/homepage/activity/activity3.png'
			}],
			array: [
				{ name: '上海浦江镇绿地乐和城店1', distance: '1.2' },
				{ name: '上海浦江镇绿地乐和城店2', distance: '1.3' },
				{ name: '上海浦江镇绿地乐和城店3', distance: '1.4' },
				{ name: '上海浦江镇绿地乐和城店4', distance: '1.5' }
			],
			index: 0,
		})
		const closePopup = ()=>{
			data.popupShow = false
			uni.showTabBar()
		}
		const iconClick = (item,index)=>{
			switch(index){
				case 0:
					iconIndex0()
					break;
				case 1:
					iconIndex1();
					break;
				case 2:
					iconIndex2();
					break;
				case 3:
					iconIndex3();
					break;
			}
		}
		const iconIndex0 = ()=>{
			uni.navigateTo({
				// 拍视频
				url:'/packageHome/pages/shotVideo/index'
			})
		}
		const iconIndex1 = ()=>{
			uni.hideTabBar()
			data.popupShow = true
		}
		const iconIndex2 = () => {
			uni.navigateTo({
				// 我要付费
				url:'/pages/myOrder/index'
			})
		}
		const iconIndex3 = () => {
			uni.navigateTo({
				// 就医记录
				url:'/pages/medicalRecord/index'
			})
		}
		const bindPickerChange = (e) => {
			data.index = e.target.value
		}
		
		const gotoHospitalListOffline = () => {
			uni.navigateTo({
				// 就医记录
				url:'/pages/hospitalList/index?isOnline=false',
			})
		}
		
		// 跳转服务项目
		const gotoServiceItems = () => {
			uni.navigateTo({
				url:'/pages/serviceItems/index?isOnline=true',
			})
		}
		
		// 跳转就医记录
		const gotoHospitalListOnline = () => {
			uni.navigateTo({
				url:'/pages/hospitalList/index?isOnline=true',
			})
		}
		
		// 跳转打卡领积分
		const gotoActivityCheckIn = () => {
			uni.navigateTo({
				url:'/pages/activityCheckIn/index?isOnline=true',
			})
		}
		return {
			...toRefs(data),
			bindPickerChange,
			iconClick,
			closePopup,
			prefix_image,
			gotoHospitalListOffline,
			gotoHospitalListOnline,
			gotoActivityCheckIn,
			gotoServiceItems
		}
	}
})
</script>
<style lang="stylus" scoped>
.home-page {
	min-height: 100vh;
	background: #F6F6F7;
	padding 0 32rpx
	box-sizing: border-box
	.custom-header {
		width: 100vw;
		display: flex;
		align-items: center;
		position: fixed;
		background: #F6F6F7;
		box-sizing: border-box;
		z-index 100
		image {
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%
			margin-right: 32rpx;
		}

		.store {
			display: flex
			flex-direction: column
			justify-content: space-between

			.name {
				font-size 28rpx
				color: #333333;
				font-weight: 600
				display: flex
				align-items: center
				image{
					width:12rpx;
					height:15rpx;
					border:1rpx solid #ccc;
					padding:9rpx 12rpx;
					margin-left:12rpx
				}
			}

			.location {
				font-size 20rpx
				color: #999999;
			}
		}

	}

	.home-body {
		box-sizing: border-box;

		.body-first {
			background: #fff;
			margin: 63rpx 0 24rpx
			height: 234rpx;
			border-radius: 16rpx;
			display: flex
			box-sizing: border-box
			padding 32rpx 0 40rpx

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin 0 13rpx
				flex: 1
				position: relative
				.bubble{
					width: 36rpx;
					height: 28rpx;
					border-radius: 18rpx 18rpx 18rpx 0;
					position: absolute
					left 106rpx
					color:#fff
					font-size 20rpx
					text-align: center;
					line-height: 28rpx
				}
				.bubble1{
					background: #6B34FF;
					text-align: center
				}
				.bubble2{
					background: #FF413C;

				}
				image {
					width: 76rpx
					height: 76rpx
				}
				.title{
					color:#333	
					font-size: 28rpx;
					margin-bottom 12rpx
					font-weight: 600

				}
				.desc{
					font-size: 22rpx;
					color:#999;
				}
			}
		}
		.body-sed{
			display: flex
			// margin: 0 32rpx
			justify-content: space-between
			.item{
				width: 331rpx;
				height: 238rpx;
				border-radius: 16rpx
				display: flex
				flex-direction: column
				background: #fff
				box-sizing: border-box
				padding 32rpx 0 0 28rpx
				.title{
					font-size: 32rpx;
					color: #333333;
					line-height: 32rpx;
					font-weight: 600

				}
				.desc{
					font-size: 24rpx;
					font-weight: 400;
					color: #B24600;
					line-height: 24rpx;
					margin-top 16rpx
				}
				.bottom{
					position: relative
					top -5rpx
					.go{
						width: 54rpx
						height: 36rpx
						position: absolute
						top 24rpx
						left 0
					}
					.cat{
						width 160rpx
						height: 140rpx
						position: absolute
						right 0
					}
				}
			}
		}
		.hotImg{
			width: 272rpx
			height: 48rpx
			margin: 64rpx 0 24rpx 0
		}
		.activity{
			image{
				width 686rpx
				height: 260rpx
				margin-bottom: 24rpx
			}
		}
	}
}
</style>

<style lang="stylus" scoped>
.popupContent{
	width: 100vw;
	height: 478rpx;
	background: #FFFFFF;
	border-radius: 32rpx 32rpx 0 0;
	box-sizing: border-box
	padding 24rpx 32rpx
	.gui-icons{
		text-align: right
		font-size 30rpx
		color #D6D6D6
	}
	.content{
		display: flex;
		justify-content: space-between
		align-items: center
		.left ,.right{
			width: 335rpx;
			height: 230rpx;
			background: #F5F5F5;
			border-radius: 16rpx;
			position: relative
			text{
				position: absolute 
				top 30rpx
				left 28rpx
				font-size: 30rpx;
				font-weight: 600;
				color: #333333;
			}
			image{
				position: absolute
				right 0
				bottom 0
				width 180rpx
				height: 154rpx
			}
		}
	}

}
</style>

